<template>
  <div class="menu">
    <div class="menuItem active"
         @click="routingHop($event, '/test/todo')">
      todo
    </div>
    <div class="menuItem"
         @click="routingHop($event, '/test/test1')">
      test1
    </div>
  </div>
</template>


<script>
  import { useRouter, useRoute } from 'vue-router'
  import { reactive, onMounted } from 'vue'
  export default {
    name: "KyMenu",
    setup () {
      const router = useRouter()
      const route = useRoute()

      const state = reactive({
        msg: 123
      })

      onMounted(() => {
        // domActive()
        routingHop(false, '/test/todo')
      })


      function routingHop (e, path) {
        if (path === '') { throw '跳转路径不能为空' }
        if (e) {
          domActive()
          e.target.className = 'menuItem active'
        }
        router.push(path)
      }

      function domActive() {
        let domList = document.getElementsByClassName('menuItem')
        Array.from(domList).map(item =>{
          item.className = 'menuItem'
        })
      }

      return {
        routingHop,
      }
    }
  }
</script>

<style scoped>
  .menu{
    box-sizing: border-box;
    padding: 20px 4px;
    height: 100vh;
    background: linear-gradient(#00177E, #00AFCD);
  }

  .menuItem{
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    padding-left: 10px;
    border-radius: 2px;
    color: #ffffff;
    font-size: 16px;
  }

  .active{
    background: hsla(0,0%,100%,.2);
  }
</style>
